<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true" title="公开课" />
		<view class="container">
			<!-- 顶部筛选栏 -->
			<view class="filter-bar">
				<picker :range="positions" @change="bindPickerChange1" :value="selectedPosition" class="pickker1">
					<view class="filter-item">{{ positions[selectedPosition] }}</view>
					<uni-icons type="arrowdown" size="20" class="icontex"></uni-icons>
				</picker>
				<picker :range="categories" @change="bindPickerChange2" :value="selectedCategory" class="pickker1">
					<view class="filter-item">{{ categories[selectedCategory] }}</view>
					<uni-icons type="arrowdown" size="20" class="icontex"></uni-icons>
				</picker>
				<picker :range="teachers" @change="bindPickerChange3" :value="selectedTeacher" class="pickker1">
					<view class="filter-item">{{ teachers[selectedTeacher] }}</view>
					<uni-icons type="arrowdown" size="20" class="icontex"></uni-icons>
				</picker>
			</view>
			<view class="filter-bar">
				<view style="width: 300rpx; margin-right: 30rpx;">
					<input class="uni-input" placeholder="请输入名称" />
				</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<button size="mini" type="default" style="background:#31b0e5;color: #fff;">筛选</button>
			</view>
			
			<!-- 课程卡片列表 -->
			<view class="card-list">
				<course-card v-for="(item, idx) in courses" :key="idx" :course="item" />
			</view>
		</view>
	</view>

</template>

<script>
	import CourseCard from './components/CourseCard.vue'

	export default {
		components: {
			CourseCard
		},
		data() {
			 const currentDate = this.getDate({
				format: true
			})
			return {
				positions: ['岗位', '研发', '市场', '人力'],
				categories: ['课程分类', '市场营销', '生物医药', '人工智能'],
				teachers: ['讲师', '张老师', '李老师'],
				selectedPosition: 0,
				selectedCategory: 0,
				selectedTeacher: 0,
				courses: [{
						title: '营销工具',
						category: '市场营销',
						date: '2025-01-01',
						price: 1899,
						hot: true,
						image: '/static/images/ai-robot.jpg'
					},
					{
						title: '药物研发流程',
						category: '生物医药',
						date: '2025-01-01',
						price: 2799,
						hot: false,
						image: '/static/images/student-class.jpg'
					},
					{
						title: '机器学习进阶',
						category: '人工智能',
						date: '2025-01-01',
						price: 2499,
						hot: false,
						image: '/static/images/wealth-stocks.jpg'
					},
					{
						title: '市场营销策略',
						category: '市场营销',
						date: '2025-01-01',
						price: 1599,
						hot: true,
						image: '/static/images/expert-health.jpg'
					},
					{
						title: '生物医药导论',
						category: '生物医药',
						date: '2025-01-01',
						price: 1999,
						hot: false,
						image: '/static/images/ai-robot.jpg'
					},
					{
						title: '人工智能基础',
						category: '人工智能',
						date: '2025-01-01',
						price: 2099,
						hot: false,
						image: '/static/images/wealth-stocks.jpg'
					}
				],
				date: currentDate,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.selectedPosition = e.detail.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.selectedCategory = e.detail.value
			},
			bindPickerChange3: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.selectedTeacher = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.filter-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-around;
		width: 100%;
	}

	.filter-item {}

	.filter-btn {
		background: #1976d2;
		color: #fff;
		border-radius: 10rpx;
		padding: 10rpx 30rpx;
	}

	.card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.pickker1 {
		width: 31%;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		border: 1rpx solid #eee;
		display: flex;
		padding: 0 2%;
		box-sizing: border-box;
		border-radius: 6rpx;
		flex-wrap: wrap;
		position: relative;
	}

	.filter-item {
		display: block;
		height: 60rpx;
		line-height: 56rpx;
		width: 190rpx;
	}

	.icontex {
		position: absolute;
		right: 10rpx;
		top: 0;
	}
</style>